<template>
	<view class="payment">
		<uniNavbar
			title="确认支付" 
			left-text='关闭'
			fixed="true"
			status-bar='true'
			@clickLeft='goBack'
		></uniNavbar>
		<view class="pay-main">
			<view class="pay-item">
				<image class="pay-img" src="../../static/img/zgb.PNG" mode=""></image>
				<view class="">
					<view class="">支付宝支付</view>
					<view class="pay-text">推荐支付宝用户使用</view>
				</view>
				<label class="radio">
					<radio value="" color="#FF3333" /><text></text>
				</label>
			</view>
			<view class="pay-item">
				<image class="pay-img" src="../../static/img/wx.PNG" mode=""></image>
				<view class="">
					<view class="">微信支付</view>
					<view class="pay-text">推荐微信用户使用</view>
				</view>
				<label class="radio">
					<radio value="" color="#FF3333" /><text></text>
				</label>
			</view>
		</view>
		<!-- 底部 -->
		<view class="pay-footer">
			<view class="payNumber">
				<text>合计:</text>
				<text class="total-price">￥159.0</text>
			</view>
			<view class="go-pay" @tap="goPayment">去支付</view>
		</view>
	</view>
</template>

<script>
	import uniNavbar from '../../components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				
			}
		},
		components:{
			uniNavbar
		},
		methods: {
			//点击关闭键，返回上一页
			goBack() {
				uni.navigateBack({
					delta:1
				})
			},
			// 跳转到支付成功页面
			goPayment() {
				uni.navigateTo({
					url:'../payment-success/payment-success'
				})
			}
		}
	}
</script>

<style scoped>
.pay-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 2rpx solid #CCCCCC;
}
.pay-text {
	color: #F7F7F7;
}
	
.pay-img {
	width: 100rpx;
	height: 100rpx;
}

/* 底部 */
.pay-footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.total-price {
	color: #FFFFFF;
}
.payNumber {
	color: #FFFFFF;
	padding-left: 200rpx;
	flex: 1;
	background-color: #333333;
	line-height: 100rpx;
}
.go-pay {
	color: #FFFFFF;
	background-color: #49BDFB;
	line-height: 100rpx;
	text-align: center;
	width: 220rpx;
}
</style>
